<template>
  <div class="form-main">
    <ul>
      <li class="input-box flex-box">
        <div><p>父亲姓名</p><input type="text" v-model="formChildMsg.father.name.value" placeholder="请输入父母姓名"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>父亲身份证号码</p><input type="text" @blur="checkSfz('father')" v-model="formChildMsg.father.sfzNumber.value" placeholder="请输入身份证号码" oninput="value=value.replace(/[^\w]/g,'')"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>出生日期</p>
          <div class="select-btn">
            <p @click="showPicker3">{{formChildMsg.father.birthday.value}}<span v-if="formChildMsg.father.birthday.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>年龄</p>
          <div class="select-btn">
            <p>{{formChildMsg.father.age.value}}<span v-if="formChildMsg.father.age.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>民族</p><input v-model="formChildMsg.father.nation.value" type="text" placeholder="请输入民族"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>籍贯</p><input v-model="formChildMsg.father.place.value" type="text" @blur="setJiGuan()" placeholder="请输入籍贯"></div>
      </li>
    </ul>
    <ul>
      <li class="input-box flex-box">
        <div><p>母亲姓名</p><input v-model="formChildMsg.mother.name.value" type="text" placeholder="请输入父母姓名"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>母亲身份证号码</p><input v-model="formChildMsg.mother.sfzNumber.value"  @blur="checkSfz('mother')" type="text" placeholder="请输入身份证号码"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>出生日期</p>
          <div class="select-btn">
            <p @click="showPicker4">{{formChildMsg.mother.birthday.value}}<span v-if="formChildMsg.mother.birthday.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>年龄</p>
          <div class="select-btn">
            <p>{{formChildMsg.mother.age.value}}<span v-if="formChildMsg.mother.age.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>民族</p><input v-model="formChildMsg.mother.nation.value" type="text" placeholder="请输入民族"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>籍贯</p><input v-model="formChildMsg.mother.place.value" type="text" placeholder="请输入籍贯"></div>
      </li>
    </ul>
    <ul>
      <li class="input-box flex-box">
        <div><p>联系电话</p><input @blur="checkTel" v-model="formChildMsg.contact.tel.value" type="text" placeholder="请输入"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>通讯地址</p><input v-model="formChildMsg.contact.address.value" type="text" placeholder="选填"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>电子邮箱</p><input @blur="checkEmail" v-model="formChildMsg.contact.email.value" type="text" placeholder="选填"></div>
      </li>
    </ul>
    <ul class="select-last">
      <li class="input-box flex-box">
        <div><p>受检者姓名</p><input v-model="formChildMsg.self.name.value" type="text" placeholder="请输入"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>性别</p>
          <div class="select-btn">
            <p @click="sexSelectBtn">{{formChildMsg.self.sex.value}}<span v-if="formChildMsg.self.sex.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>民族</p><input type="text" v-model="formChildMsg.self.nation.value" placeholder="请输入受检者民族"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>籍贯</p><input type="text" v-model="formChildMsg.self.place.value" placeholder="请输入籍贯"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>出生日期</p>
          <div class="select-btn">
            <p @click="showPicker5">{{formChildMsg.self.birthday.value}}<span v-if="formChildMsg.self.birthday.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>年龄</p>
          <div class="select-btn">
            <p>{{formChildMsg.self.age.value}}<span v-if="formChildMsg.self.age.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
    </ul>
    <div class="form-foot">
      <div class="form-foot-main">
        <router-link to="/sjformb"><button class="pre-page">上一步</button></router-link>
        <button class="next-page" @click="formcSubmitChild">下一步</button>
      </div>
    </div>
    <awesome-picker
      ref="picker3"
      :textTitle="picker3.textTitle"
      :type="picker3.type"
      :anchor="picker3.anchor"
      @confirm="handlePicker3Confirm($event,pickerNum)">
    </awesome-picker>
    <sexSelect v-if="sexShow" :showSex="sexShow" @tcClothe="tcClothe"></sexSelect>
  </div>
</template>
<script>
// @ is an alias to /src
import sexSelect from '@/quanjiyin/components/SexSelect.vue'
const STORAGE_KEY_C = 'formcMsgChild'
export default {
  name: 'formChild',
  data() {
    return {
      list: '',
      sexShow: false,
      pickerNum: 3,
      sfzNumber: '',
      formChildMsg: {
        father: {
          name: {
            key: '父亲姓名',
            value: ''
          },
          sfzNumber: {
            key: '父亲身份证号码',
            value: ''
          },
          birthday: {
            key: '出生日期',
            value: '请选择'
          },
          age: {
            key: '年龄',
            value: '请选择'
          },
          nation: {
            key: '民族',
            value: ''
          },
          place: {
            key: '籍贯',
            value: ''
          }
        },
        mother: {
          name: {
            key: '母亲姓名',
            value: ''
          },
          sfzNumber: {
            key: '母亲身份证号码',
            value: ''
          },
          birthday: {
            key: '出生日期',
            value: '请选择'
          },
          age: {
            key: '年龄',
            value: '请选择'
          },
          nation: {
            key: '民族',
            value: ''
          },
          place: {
            key: '籍贯',
            value: ''
          }
        },
        contact: {
          tel: {
            key: '联系电话',
            value: ''
          },
          address: {
            key: '通讯地址',
            value: ''
          },
          email: {
            key: '电子邮箱',
            value: ''
          }
        },
        self: {
          name: {
            key: '受检者姓名',
            value: ''
          },
          sex: {
            key: '性别',
            value: '请选择'
          },
          nation: {
            key: '民族',
            value: ''
          },
          place: {
            key: '籍贯',
            value: ''
          },
          birthday: {
            key: '出生日期',
            value: '请选择'
          },
          age: {
            key: '年龄',
            value: '请选择'
          }
        }
      },
      picker3: {
        anchor: [],
        textTitle: '',
        type: 'date'
      },
      storageLists: this.$localStorage.fetch(STORAGE_KEY_C)
    }
  },
  components: {
    sexSelect
  },
  computed: {},
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY_C, storageLists)
      },
      deep: true
    }
  },
  methods: {
    sexSelectBtn() {
      setTimeout(() => {
        this.sexShow = true
      }, 0)
    },
    tcClothe(v) {
      if (v != undefined) {
        this.formChildMsg.self.sex.value = v
      }
      if (this.sexShow === true) {
        this.sexShow = false
      }
    },
    setJiGuan() {
      this.formChildMsg.self.place.value = this.formChildMsg.father.place.value
    },
    checkSfz(value) {
      let sfId
      if (value === 'father') {
        sfId = this.formChildMsg.father.sfzNumber.value
      } else if (value === 'mother') {
        sfId = this.formChildMsg.mother.sfzNumber.value
      }
      let yearNow = new Date().getFullYear()
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (reg.test(sfId) === false) {
        this.$layer.open({
          content: '请输入正确的身份证号码',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        if (sfId.length === 15) {
          let year = Number('19' + sfId.substr(6, 2))
          let month = sfId.substr(8, 2)
          month = Number(month) < 10 ? Number(month.substr(1, 1)) : Number(month)
          let day = sfId.substr(10, 2)
          day = Number(day) < 10 ? Number(day.substr(1, 1)) : Number(day)
          if (value === 'father') {
            this.formChildMsg.father.birthday.value = year + '年' + month + '月' + day + '日'
            this.formChildMsg.father.age.value = yearNow - year + '岁'
          } else if (value === 'mother') {
            this.formChildMsg.mother.birthday.value = year + '年' + month + '月' + day + '日'
            this.formChildMsg.mother.age.value = yearNow - year + '岁'
          }
        } else if (sfId.length === 18) {
          let year = Number(sfId.substr(6, 4))
          let month = sfId.substr(10, 2)
          month = Number(month) < 10 ? Number(month.substr(1, 1)) : Number(month)
          let day = sfId.substr(12, 2)
          day = Number(day) < 10 ? Number(day.substr(1, 1)) : Number(day)
          // console.log(yearNow);
          // console.log(year,month,day,yearNow);
          // birthday = year + "年" + month + "月" + day + "日";
          // age = yearNow - year + "岁";
          if (value === 'father') {
            this.formChildMsg.father.birthday.value = year + '年' + month + '月' + day + '日'
            this.formChildMsg.father.age.value = yearNow - year + '岁'
          } else if (value === 'mother') {
            this.formChildMsg.mother.birthday.value = year + '年' + month + '月' + day + '日'
            this.formChildMsg.mother.age.value = yearNow - year + '岁'
          }
        }
      }
    },
    checkTel() {
      let reg = /^1\d{10}$/
      if (reg.test(this.formChildMsg.contact.tel.value) === false) {
        this.$layer.open({
          content: '请输入正确的手机号码',
          skin: 'msg',
          time: 2
        })
        return false
      }
    },
    checkEmail() {
      let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (reg.test(this.formChildMsg.contact.email.value) === false) {
        this.$layer.open({
          content: '请输入正确的邮箱地址',
          skin: 'msg',
          time: 2
        })
        return false
      }
    },
    showPicker3() {
      this.$refs.picker3.show()
      this.pickerNum = 3
    },
    showPicker4() {
      this.$refs.picker3.show()
      this.pickerNum = 4
    },
    showPicker5() {
      this.$refs.picker3.show()
      this.pickerNum = 5
    },
    handlePicker3Confirm(v, a) {
      let now = new Date().getTime()
      let yearNow = new Date().getFullYear()
      let Y = v[0].value.slice(-5, -1)
      let M = v[1].value.slice(-5, -1)
      M = Number(M) < 10 ? 0 + '' + M : M
      let D = v[2].value.slice(-5, -1)
      D = Number(D) < 10 ? 0 + '' + D : D
      let myD = new Date(Y + '-' + M + '-' + D)
      let seMyD = myD.getTime(myD)
      if (a === 3) {
        if (yearNow - Y < 10) {
          this.$layer.open({
            content: '父母年龄不能小于十岁',
            skin: 'msg',
            time: 2
          })
          return false
        }
        // console.log(v[0].value.slice(-5, -1));
        this.formChildMsg.father.birthday.value = v[0].value + '' + v[1].value + '' + v[2].value
        this.formChildMsg.father.age.value = yearNow - v[0].value.slice(0, 4) + '岁'
      } else if (a === 4) {
        if (yearNow - Y < 10) {
          this.$layer.open({
            content: '父母年龄不能小于十岁',
            skin: 'msg',
            time: 2
          })
          return false
        }
        this.formChildMsg.mother.birthday.value = v[0].value + '' + v[1].value + '' + v[2].value
        this.formChildMsg.mother.age.value = yearNow - v[0].value.slice(0, 4) + '岁'
      } else if (a === 5) {
        if (now - seMyD < 0) {
          this.$layer.open({
            content: '出生日期不能超过当前',
            skin: 'msg',
            time: 2
          })
          return false
        }
        this.formChildMsg.self.birthday.value = v[0].value + '' + v[1].value + '' + v[2].value
        this.formChildMsg.self.age.value = yearNow - v[0].value.slice(0, 4) + '岁'
      }
    },
    formcSubmitChild() {
      if (this.formChildMsg.father.name.value === '') {
        this.$layer.open({
          content: '请输入父亲姓名',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.father.sfzNumber.value === '') {
        this.$layer.open({
          content: '请输入父亲身份证号码',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.father.birthday.value === '请选择') {
        this.$layer.open({
          content: '请选择父亲出生日期',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.father.nation.value === '') {
        this.$layer.open({
          content: '请输入父亲民族',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.father.place.value === '') {
        this.$layer.open({
          content: '请输入父亲籍贯',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.mother.name.value === '') {
        this.$layer.open({
          content: '请输入母亲姓名',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.mother.sfzNumber.value === '') {
        this.$layer.open({
          content: '请输入母亲身份证号码',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.mother.birthday.value === '请选择') {
        this.$layer.open({
          content: '请输入母亲出生日期',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.mother.nation.value === '') {
        this.$layer.open({
          content: '请输入母亲民族',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.mother.place.value === '') {
        this.$layer.open({
          content: '请输入母亲籍贯',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.contact.tel.value === '') {
        this.$layer.open({
          content: '请输入您的联系电话',
          skin: 'msg',
          time: 2
        })
        return false
      }
      // else if (this.formChildMsg.contact.address.value === "") {
      //   this.$layer.open({
      //     content: "请输入您的通讯地址",
      //     skin: "msg",
      //     time: 2
      //   });
      //   return false;
      // } else if (this.formChildMsg.contact.email.value === "") {
      //   this.$layer.open({
      //     content: "请输入您的邮箱地址",
      //     skin: "msg",
      //     time: 2
      //   });
      //   return false;
      // }
      else if (this.formChildMsg.self.name.value === '') {
        this.$layer.open({
          content: '请输入您的姓名',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.self.sex.value === '请选择') {
        this.$layer.open({
          content: '请输入您的性别',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.self.nation.value === '') {
        this.$layer.open({
          content: '请输入您的民族',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.self.place.value === '') {
        this.$layer.open({
          content: '请输入您的籍贯',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formChildMsg.self.birthday.value === '请选择') {
        this.$layer.open({
          content: '请输入您的出生日期',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        window.localStorage.removeItem('formcMsgChild')
        setTimeout(() => {
          this.storageLists = this.formChildMsg
        }, 0)
        setTimeout(() => {
          console.log(window.localStorage)
          console.log(this.$localStorage.fetch(STORAGE_KEY_C))
          this.$router.push('/SjFormd')
        }, 100)
      }
    }
  },
  mounted() {
    this.formChildMsg.contact.tel.value = this.$store.state.logPhoneNum
    this.formChildMsg = window.localStorage.formcMsgChild
      ? JSON.parse(window.localStorage.formcMsgChild)
      : this.formChildMsg
  }
}
</script>
<style lang="scss" scoped>
</style>
